<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>definePeoperty介绍</title>
</head>
<body>
  <script>
    let obj = {
      name: 'chenmanjie',
      from: 'anhui'
    }  
    window.obj = obj;

    /**
     * defineProperty(object, property, attribute)
     * enumerable 是否可以被枚举
     * writable 是否可以被修改，可以用来模拟const定义常量
     * configurable 是否可以被删除
     * value 定义属性的值
     * get 劫持属性的读取行为
     * set 劫持属性的修改行为
     */
    // Object.defineProperty(obj, 'name', {
    //   enumerable: false
    // })

    for (let key in obj) {
      console.log('key...value....', key, obj[key]);
    }

    // Object.defineProperty(obj, 'name', {
    //   writable: false
    // })
    // obj.name = 'MJ';

    // Object.defineProperty(obj, 'from', {
    //   configurable: false
    // })
    // delete obj.from;

    // Object.defineProperty(obj, 'from', {
    //   value: 'anhui'
    // })

    function reactive(object, key, value){
      Object.defineProperty(object, key, {
        get(){
          console.log('读取属性的值...', object, key, value);
          return value;
        },
        set(newValue){
          console.log('修改属性的值...', object, key, value, newValue);
          value = newValue;
        }
      })
    }
    reactive(obj, 'from', obj['from']);
  </script>
</body>
</html>